<template>
  <div>
    <h3 style="color: #9495c5">创建短通告</h3>
    <el-container>
      <el-form :model="notifyForm" class="form-container" label-position="left"
               label-width="80px">
        <el-form inline :model="notifyForm" label-width="80px">
          <el-form-item prop="type" label="通告类型" style="padding-right: 70px">
            <el-select v-model="notifyForm.type" placeholder="请选择" clearable>
              <el-option
                v-for="item in optionsType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="type" label="发布对象">
            <el-select v-model="notifyForm.discordTo.id" style="width: 105%;" placeholder="请选择" clearable>
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form-item prop="type" label="标题">
          <el-input type="text" v-model="notifyForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="type" label="内容">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5}"
                    placeholder="通告内容(不超过200个字)"
                    v-model="notifyForm.bz"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 18%;background: #9495c5;border: none" type="primary" size="medium" @click="discord">
            发布通告
          </el-button>
          <el-button style="width: 18%;background: #9495c5;border: none" type="primary" size="medium" @click="preview">
            预览效果
          </el-button>
        </el-form-item>
      </el-form>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'TeacherNotify',
  data () {
    return {
      optionsType: [{
        value: 400,
        label: '警告信息'
      }, {
        value: 300,
        label: '普通信息'
      }],
      options1: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      options2: [{
        value: 1,
        label: '学生'
      }],
      // rules: [],
      notifyForm: {
        id: '',
        acc: '',
        type: '',
        title: '',
        bz: '',
        fbsj: '',
        enabled: '',
        discordTo: {
          id: '',
          name: ''
        }
      }
    }
  },
  methods: {
    discord () {
      this.notifyForm.fbsj = new Date().getTime()
      this.notifyForm.acc = this.$store.state.acc
      this.notifyForm.discordTo.name = this.notifyForm.discordTo.id === 1 ? 'Student' : 'Teacher'
      this.$axios.post('/admin/notify_manager/table/editInfo', {
        id: this.notifyForm.id,
        acc: this.notifyForm.acc,
        type: this.notifyForm.type,
        title: this.notifyForm.title,
        bz: this.notifyForm.bz,
        fbsj: this.notifyForm.fbsj,
        enabled: this.notifyForm.enabled,
        discordTo: this.notifyForm.discordTo
      }).then(resp => {
        this.$alert('添加成功')
        this.clearData()
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
    },
    preview () {
      if (this.notifyForm.title === '' || this.notifyForm.bz === '') {
        this.$alert('填写标题、内容和类型以预览')
      } else {
        this.$notify({
          title: this.notifyForm.title,
          message: this.notifyForm.bz,
          duration: 0, // 停留时长
          type: this.notifyForm.type === 300 ? 'info' : 'warning',
          offset: 200
        })
      }
    },
    clearData () {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped>
.form-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 30px auto;
  width: 700px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>
